<template>
  <div>
    <a-page-header class="pt-0" @back="back" :title="t('填写表单')"></a-page-header>
    <a-spin :spinning="table.loading" class="w-[100%]">
      <a-form layout="vertical" @finish="submit" :rules="formRules" :model="form" ref="formRef">
        <a-row>
          <a-col :span="24" class="mb-4">
            <a-card>
              <a-form-item :label="t('背景')">
                <div class="flex gap-4">
                  <a-card class="flex-1">
                    <div class="w-full text-center flex gap-12 relative">
                      <XImage
                        :src="form.background"
                        :height="200"
                        style="object-fit: contain"
                      ></XImage>
                      <div class="absolute left-4 bottom-0">
                        <a-button
                          danger
                          class="my-4"
                          shape="circle"
                          type="primary"
                          @click="form.background = ''"
                          v-if="form.background"
                        >
                          <DeleteOutlined />
                        </a-button>
                      </div>
                      <div
                        class="border w-[120px] flex justify-center items-center cursor-pointer"
                        @click="visible = true"
                      >
                        <span class="text-[2rem] text-gray-500">
                          <plus-outlined />
                        </span>
                      </div>
                      <button
                        @click="create"
                        type="button"
                        class="border create w-[120px] flex justify-center items-center"
                      >
                        <span class="text-[2rem]">{{ t('绘制') }}</span>
                      </button>
                    </div>
                  </a-card>
                </div>
              </a-form-item>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card>
              <a-form-item :label="t('名称')" name="themeName">
                <a-input allow-clear class="w-fit" v-model:value="form.themeName" />
              </a-form-item>
              <a-form-item :label="t('尺寸')" v-if="!form.themeId" name="sizeId">
                <a-radio-group v-model:value="form.sizeId">
                  <a-radio
                    v-for="item in eslResolutionOptions"
                    @click="setWH(item)"
                    :value="item.value"
                  >
                    {{ item?.label }}
                  </a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item :label="t('分类')" name="category">
                <a-radio-group
                  :options="themeTypeOptions"
                  v-model:value="form.category"
                ></a-radio-group>
              </a-form-item>
              <div class="flex gap-4">
                <a-form-item :label="t('宽度')" name="width">
                  <a-input-number allow-clear disabled class="w-fit" v-model:value="form.width" />
                </a-form-item>
                <a-form-item :label="t('高度')" name="height">
                  <a-input-number allow-clear disabled class="w-fit" v-model:value="form.height" />
                </a-form-item>
              </div>

              <a-form-item :label="t('是否共享')">
                <a-radio-group :options="isOptions" v-model:value="form.share"></a-radio-group>
              </a-form-item>

              <div class="flex gap-4">
                <a-button type="primary" htmlType="submit" v-if="form.themeId">
                  {{ t('保存') }}
                </a-button>
                <a-button type="primary" htmlType="submit" v-else>{{ t('绘制') }}</a-button>
                <a-button @click="reset">{{ t('重置') }}</a-button>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <FileSelector
      :type="LIBRARY_ENUM.IMAGE"
      v-model:selected="form.background"
      v-model:visible="visible"
      :sizeId="form.sizeId"
    ></FileSelector>
  </div>
</template>

<script setup lang="ts">
import type { IResponse } from '@/api/config/types';
import { list } from '../data/curd';
import { allowEditMenu, displayCanvas, table } from '../data/data';
import { formRef, form, formRules } from '../data/form';

import { themeTypeOptions, eslResolutionOptions } from '../data/options';
import type { IResolution } from '@/api/modules/data/resolution';
import { isOptions } from '@/data/system.options';
import { updateTheme } from '@/api/modules/lcd/theme';
import { notify } from '@/utils/common/common';
import { LIBRARY_ENUM } from '@/enum/system';

const { t } = useI18n();
const visible = ref(false);
const back = () => {
  allowEditMenu.value = false;
  reset();
};
const create = async () => {
  if (!formRef.value) return;
  const isTruly = await formRef.value.validate();

  if (isTruly) displayCanvas.value = true;
};
const setWH = (e: { raw: IResolution }) => {
  form.value.width = e.raw.width;
  form.value.height = e.raw.height;
};
const submit = async () => {
  table.value.loading = true;
  let result: IResponse | undefined = undefined;
  if (!form.value.themeId) {
    displayCanvas.value = true;
    return;
  } else {
    table.value.loading = true;
    const { data } = await updateTheme(form.value);
    result = data;
  }
  notify(result);
  table.value.loading = false;
  await list();
  back();
};
const reset = () => {
  formRef.value?.resetFields();
};
</script>

<style lang="scss" scoped>
.create {
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  background-blend-mode: difference;
  border-radius: var(--radius);
}
button:disabled {
  cursor: not-allowed;
}
</style>
